import { getWedaAPI, createComponent, concatClassList, px2rpx } from '@cloudbase/weda-client'
import lifeCycle from './lowcode/lifecycle'
import stateFn from './lowcode/state'
import computedFuncs from './lowcode/computed'

import _hanldergetTabbarStyle from './lowcode/handler/getTabbarStyle' 
import _hanlderonTabItemClick from './lowcode/handler/onTabItemClick' 

const app = new Proxy({}, { get: function(obj, prop){ return getWedaAPI()?.app?.[prop] }});
const $app = new Proxy({}, { get: function(obj, prop){ return app[prop] }});

const handlers = {
  getTabbarStyle: _hanldergetTabbarStyle, 
  onTabItemClick: _hanlderonTabItemClick, 
}

const widgetProps = {
  "id2": {
    "style": {},
    "classList": [
      "lcap-tabbar"
    ],
    "title": "",
    "_order": 1,
    "widgetType": "gsd-h5-react:Container"
  },
  "id4": {
    "style": {},
    "classList": [],
    "circle": false,
    "textSize": 24,
    "underline": false,
    "activeIcon": "",
    "circleSize": 100,
    "costomIcon": "",
    "_parentId": "id2",
    "_order": 2,
    "widgetType": "CLOUDBASE_STANDARD:TabBarItem"
  },
  "id5": {
    "style": {},
    "classList": [],
    "_parentId": "id4",
    "_order": 1,
    "widgetType": "CLOUDBASE_STANDARD:Icon"
  }
}





const evtListeners = {"onid4$click": [
      {
          key: '',
          sourceKey: 'comp-45r3ccimzdqx:onTabItemClick',
          handler: handlers.onTabItemClick,
          args: {
  "params": [
    {}
  ]
},
          argsBinds: {'params.0.target': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $for.id4
    )}}
        }
    ],}

const behaviors = []

const properties = {
  "tabs": {
    type: Array,
    value: [{"name":"","title":"标签1","iconFont":"td:app"},{"name":"","title":"标签2","iconFont":"td:cart"},{"name":"","title":"标签3","iconFont":"td:user"}]
  },
  "color": {
    type: String,
    value: "#444444"
  },
  "route": {
    type: Boolean,
    value: false
  },
  "value": {
    type: String,
    value: ""
  },
  "tabbar": {
    type: String,
    value: ""
  },
  "package": {
    type: String,
    value: ""
  },
  "iconSize": {
    type: Number,
    value: 40
  },
  "position": {
    type: String,
    value: "bottom"
  },
  "routeType": {
    type: String,
    value: "redirectTo"
  },
  "layoutType": {
    type: String,
    value: "iconText"
  },
  "activeColor": {
    type: String,
    value: "#006EFF"
  },
  "backgroundType": {
    type: String,
    value: "color"
  },
  "backgroundColor": {
    type: String,
    value: "#FFF"
  },
  "backgroundImage": {
    type: String,
    value: ""
  },
}

const events = [
  {name: "change", },
]



const dataBinds = {
  id2: { 'classList': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      concatClassList(
$comp.props.data.position
, widgetProps.id2.classList)
    )},'style': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      px2rpx({...widgetProps.id2.style, ...(
$comp.handler.getTabbarStyle()
)})
    )}
  },
  id4: { 'icon': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      (($comp.props.data.package === undefined || ($comp.props.data.package  === '' ? !forItems.id4.packageName : forItems.id4.packageName === $comp.props.data.package)) && forItems.id4.name === $comp.props.data.value) ? '':forItems.id4.icon
    )},'name': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $for.id4.name
    )},'color': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $comp.props.data.color
    )},'title': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $for.id4.title
    )},'actived': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      ($comp.props.data.package === undefined || ($comp.props.data.package  === '' ? !forItems.id4.packageName : forItems.id4.packageName === $comp.props.data.package)) && forItems.id4.name === $comp.props.data.value
    )},'iconFont': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $for.id4.iconFont
    )},'layoutType': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $comp.props.data.layoutType
    )},'activeColor': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $comp.props.data.activeColor
    )},'childIconSize': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $comp.props.data.iconSize
    )},'_waFor': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $comp.props.data.tabs
    )}
  },
  id5: { 'src': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $for.id4.activeIcon
    )},'name': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      forItems.id4.iconFont
    )},'size': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      $comp.props.data.iconSize
    )},'color': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      (($comp.props.data.package === undefined || ($comp.props.data.package  === '' ? !forItems.id4.packageName : forItems.id4.packageName === $comp.props.data.package)) && $comp.props.data.value === forItems.id4.name) ? $comp.props.data.activeColor:$comp.props.data.color
    )},'_waIf': ($comp, lists, forItems, event, $context, $w) => {const $for = forItems; const $index=lists?.[0]?.currentIndex; return(
      !!forItems.id4.icon && forItems.id4.iconFont === 'custom'
    )}
  },
}

const query = {
}

const eventFlows = [
]

const config = {}
const datasetProfile = {};

createComponent({
  key: 'CLOUDBASE_STANDARD:TabBar',
  behaviors,
  properties,
  events,
  handler: handlers,
  dataBinds,
  evtListeners,
  widgetProps,
  lifeCycle,
  stateFn,
  computedFuncs,
  config,
  datasetProfile,
  query,
  eventFlows,
  nativeMode: !!0,
})
